<template>
    <div class="page">
        <div class="tabPan">
            <div class="panHeader">
                <div class="title">
                    Tables
                </div>
                <div class="acs">
                    <ul class="lstAcs">
                        <li>
                            <el-button type = "text"><i class="fa fa-refresh"></i> 刷新</el-button>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="panBody" id="panBody">
                <div class="tabs" id="panTabs">
                    <div
                        v-for="(tab, tabIndex) in tables.items"
                        :key="tabIndex"
                        :class="tabIndex==tables.curIndex?'tabItem active':'tabItem' "
                        @click="onPickTable(tabIndex)"
                    >
                        {{tab.tabName}}
                    </div>
                </div>
            </div>
        </div>
        <div class="fieldPan">
            <div class="panHeader">
                <div class="title">
                    Fields
                </div>
                <div class="acs">
                    <ul class="lstAcs">
                        <li>
                            <el-button type = "text" @click="checkFields(1)"><i class="fa fa-check-square-o"></i> 全选</el-button>
                        </li>
                        <li>
                            <el-button type = "text" @click="checkFields(0)"><i class="fa fa-square-o"></i> 清除</el-button>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="panBody" >
                <div class="tabs" id="panBodyField">
                    <div
                        v-for="(field, fieldIndex) in fields.items"
                        :key="fieldIndex"
                        class="fieldItem"
                        @click="onPickField(field)"
                    >
                        <i v-if="field.checked==1" class="fa fa-check-square"></i>
                        <i  v-if="field.checked!=1" class="fa fa-square-o"></i>
                        <span>{{field.fieldName}}</span>

                    </div>
                </div>
            </div>
        </div>
        <div class="main">
            <div class="header">
                <ul class="acs">
                    <li>
                        <el-button type ="text" @click="acSelect">select</el-button>
                    </li>
                    <li>
                        <el-button type ="text" @click="acSelectAs">selectAs</el-button>
                    </li>
                    <li>
                        <el-button type ="text" @click="acInsert">insert</el-button>
                    </li>
                    <li>
                        <el-button type ="text" @click="acUpdate">update</el-button>
                    </li>
                    <li>
                        <el-button type ="text" @click="acCols">cols</el-button>
                    </li>
                    <li>
                        <el-button type ="text" @click="acJson">json</el-button>
                    </li>
                    <li>
                        <el-button type ="text" @click="acSettings">settings</el-button>
                    </li>
                    <li>
                        <el-button type ="text" @click="acTabCols">tabCols</el-button>
                    </li>
                    <li>
                        <el-button type ="text" @click="acEditors">editors</el-button>
                    </li>
                    <li>
                        <el-button type ="text" @click="acEditors2">editors2</el-button>
                    </li>
                </ul>
            </div>
            <div class="body">
                <div class="code">
                    <textarea name="" id="txtCode" rows="40" v-model="codeValue"></textarea>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
  mounted () {
    var me = this
    try {
      me.$nextTick().then(_ => {
        me.resetSize()
      })
      me.refreshTables()
    } catch (er) {
      console.log(er)
    }
  },

  data () {
    return {
      tables: {
        items: [],
        curIndex: 0
      },
      fields: {
        items: [],
        curIndex: 0
      },
      codeValue: ''

    }
  },

  methods: {
    refreshTables () {
      var me = this
      try {
        var key = 'against/getTables'
        me.sys.query(key, { }).then(res => {
          me.tables.items = res
          me.onPickTable(me.tables.curIndex)
        })
      } catch (er) {
        console.log(er)
      }
    },
    resetSize () {
      var me = this
      try {
        var h = document.getElementById('panBody').offsetHeight
        console.log(h)
        document.getElementById('panTabs').style = 'height:' + h + 'px'
        document.getElementById('panBodyField').style = 'height:' + h + 'px'
      } catch (er) {
        console.log(er)
      }
    },
    onPickTable (tabIndex) {
      var me = this
      try {
        me.tables.curIndex = tabIndex
        me.refreshFields()
      } catch (er) {
        console.log(er)
      }
    },
    refreshFields () {
      var me = this
      try {
        var key = 'against/getTableFields'
        var tabId = me.tables.items[me.tables.curIndex].tabId
        me.sys.query(key, { tabId: tabId }).then(res => {
          me.fields.items = res
        })
      } catch (er) {
        console.log(er)
      }
    },
    onPickField (f) {
      var me = this
      try {
        var fields = JSON.parse(JSON.stringify(me.fields.items))
        var field = fields.find(fi => {
          return fi.fieldName == f.fieldName
        })
        if (field.checked && field.checked > 0) {
          field.checked = 0
        } else {
          field.checked = 1
        }
        me.fields.items = fields
      } catch (er) {
        console.log(er)
      }
    },
    checkFields (flag) {
      var me = this
      try {
        var fields = JSON.parse(JSON.stringify(me.fields.items))
        fields.forEach(f => {
          f.checked = flag > 0 ? 1 : 0
        })
        me.fields.items = fields
      } catch (er) {
        console.log(er)
      }
    },
    acSelect () {
      var me = this
      try {
        var data = {
          tabName: me.tables.items[me.tables.curIndex].tabName,
          fields: me.fields.items.filter(f => {
            return f.checked && f.checked > 0
          })
        }
        var fields = data.fields.map(f => {
          return f.fieldName
        }).join(',')
        var code = ['select', fields, 'from', data.tabName].join(' ')
        me.codeValue = code
      } catch (er) {
        console.log(er)
      }
    },
    acSelectAs () {
      var me = this
      try {
        var data = {
          tabName: me.tables.items[me.tables.curIndex].tabName,
          fields: me.fields.items.filter(f => {
            return f.checked && f.checked > 0
          })
        }
        var fields = data.fields.map(f => {
          var field = me.first2Lower(f.fieldName.replace('F_', ''))
          var fieldItem = f.fieldName + ' as ' + field
          return fieldItem
        }).join('\n,')
        var code = ['select', fields, 'from', data.tabName].join(' \n')
        me.codeValue = code
      } catch (er) {
        console.log(er)
      }
    },
    first2Lower (str) {
      var me = this
      var res = str
      try {
        res = str.trim().replace(str[0], str[0].toLowerCase())
      } catch (er) {
        console.log(er)
      }
      return res
    },
    acInsert () {
      var me = this
      try {
        var data = {
          tabName: me.tables.items[me.tables.curIndex].tabName,
          fields: me.fields.items.filter(f => {
            return f.checked && f.checked > 0
          })
        }
        var fields = data.fields.map(f => {
          return f.fieldName
        }).join('\n,')
        var values = data.fields.map(f => {
          var field = me.first2Lower(f.fieldName.replace('F_', ''))
          return '%(' + field + ')s'
        }).join('\n,')
        var code = ['insert into ', data.tabName, '(', fields, ') values (', values, ')'].join('\n')
        me.codeValue = code
      } catch (er) {
        console.log(er)
      }
    },
    acUpdate () {
      var me = this
      try {
        var data = {
          tabName: me.tables.items[me.tables.curIndex].tabName,
          fields: me.fields.items.filter(f => {
            return f.checked && f.checked > 0
          })
        }
        var fields = data.fields.map(f => {
          var field = me.first2Lower(f.fieldName.replace('F_', ''))
          return f.fieldName + ' = ' + '%(' + field + ')s'
        }).join('\n,')
        var id = me.first2Lower(data.tabName.replace('T_', '')) + 'Id'
        var code = ['update', data.tabName + ' set ', fields, ' where F_ID=%(' + id + ')s'].join('\n')
        me.codeValue = code
      } catch (er) {
        console.log(er)
      }
    },
    acCols () {
      var me = this
      try {
        var data = {
          tabName: me.tables.items[me.tables.curIndex].tabName,
          fields: me.fields.items.filter(f => {
            return f.checked && f.checked > 0
          })
        }
        var code = data.fields.map(f => {
          var field = me.first2Lower(f.fieldName.replace('F_', ''))
          return "'" + field + "'"
        }).join(',')
        me.codeValue = code
      } catch (er) {
        console.log(er)
      }
    },
    acJson () {
      var me = this
      try {
        var data = {
          tabName: me.tables.items[me.tables.curIndex].tabName,
          fields: me.fields.items.filter(f => {
            return f.checked && f.checked > 0
          })
        }
        var fields = data.fields.map(f => {
          var field = me.first2Lower(f.fieldName.replace('F_', ''))
          return '\t' + field + ':"" , '
        }).join('\n')
        var code = ['{', fields, '}'].join('\n')
        me.codeValue = code
      } catch (er) {
        console.log(er)
      }
    },
    acSettings () {
      var me = this
      try {
        var data = {
          tabName: me.tables.items[me.tables.curIndex].tabName,
          fields: me.fields.items.filter(f => {
            return f.checked && f.checked > 0
          })
        }
        var code = data.fields.map(f => {
          var fieldItem = {
            field: f.fieldName,
            lab: me.first2Lower(f.fieldName.replace('F_', '')),
            width: '',
            val: ''
          }
          return JSON.stringify(fieldItem)
        }).join(',\n')
        me.codeValue = code
      } catch (er) {
        console.log(er)
      }
    },
    acTabCols () {
      var me = this
      try {
        var data = {
          tabName: me.tables.items[me.tables.curIndex].tabName,
          fields: me.fields.items.filter(f => {
            return f.checked && f.checked > 0
          })
        }
        var code = data.fields.map(f => {
          var field = me.first2Lower(f.fieldName.replace('F_', ''))
          var colItems = [
            '<el-table-column',
            '\tprop="' + field + '"',
            '\tlabel="' + field + '"',
            '></el-table-column>'
          ]
          return colItems.join('\n')
        }).join('\n')
        me.codeValue = code
      } catch (er) {
        console.log(er)
      }
    },
    acEditors () {
      var me = this
      try {
        var data = {
          tabName: me.tables.items[me.tables.curIndex].tabName,
          fields: me.fields.items.filter(f => {
            return f.checked && f.checked > 0
          })
        }
        var code = data.fields.map(f => {
          var field = me.first2Lower(f.fieldName.replace('F_', ''))
          var colItems = [
            '<div class="editRow">',
            '\t<div class="lab" style="width:130px">' + field + '</div>',
            '\t<div class="edit">',
            '\t\t<el-input v-model="dlg.info.' + field + '"></el-input>',
            '\t</div>',
            '</div>'
          ]
          return colItems.join('\n')
        }).join('\n')
        me.codeValue = code
      } catch (er) {
        console.log(er)
      }
    },
    acEditors2 () {
      var me = this
      try {
        var data = {
          tabName: me.tables.items[me.tables.curIndex].tabName,
          fields: me.fields.items.filter(f => {
            return f.checked && f.checked > 0
          })
        }
        var code = data.fields.map(f => {
          var field = me.first2Lower(f.fieldName.replace('F_', ''))
          var colItems = [
            '<el-col :span="12" >',
            '\t<div class="editRow">',
            '\t\t<div class="lab" >' + field + '</div>',
            '\t\t<div class="edit">',
            '\t\t\t<el-input v-model="dlg.info.' + field + '"></el-input>',
            '\t\t<div>',
            '\t</div>',
            '<el-col>'
          ]
          return colItems.join('\n')
        }).join('\n')
        me.codeValue = code
      } catch (er) {
        console.log(er)
      }
    }
  }
}
</script>

<style lang="less" scoped>
    .page{
        height: 100%;

        .tabPan{
            position: fixed;
            left: 0;
            width: 200px;
            height: 100%;
            background-color: #fafafa;
            display: flex;
            flex-direction: column;
            border-right: 1px solid #ddd;
            .panHeader{
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 10px;
                border-bottom: 1px solid #eee;
                .title{
                    font-weight: bold;
                }
            }
            .panBody{
                flex: 1;
                .tabs{
                    height: 500px;
                    overflow-x: hidden;
                    overflow-y: auto;
                    .tabItem{
                        padding: 10px;
                        border-bottom: 1px solid #ddd;
                    }
                    .tabItem:hover{
                        cursor: pointer;
                        background-color: #f2f3f9;
                    }
                    .tabItem.active{
                        background-color: #0077fe;
                        color: #fff;
                        font-weight: bold;
                    }
                }
            }
        }

        .fieldPan{
            position: fixed;
            left: 200px;
            width: 300px;
            height: 100%;
            background-color: #fafafa;
            display: flex;
            flex-direction: column;
            border-right: 1px solid #ddd;
            .panHeader{
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 10px;
                border-bottom: 1px solid #eee;
                .title{
                    font-weight: bold;
                }
                .acs{
                    ul.lstAcs{
                        display: flex;
                        li{
                            padding: 0 5px;
                        }
                    }
                }
            }
            .panBody{
                flex: 1;
                .tabs{
                    height: 500px;
                    overflow-x: hidden;
                    overflow-y: scroll;
                    .fieldItem{
                        padding: 10px;
                        border-bottom: 1px solid #ddd;
                        display: flex;
                        align-items: center;
                        i{
                            padding-right:10px;
                        }
                    }
                    .tabItem:hover{
                        cursor: pointer;
                        background-color: #f2f3f9;
                    }
                    .tabItem.active{
                        background-color: #0077fe;
                        color: #fff;
                        font-weight: bold;
                    }
                }
            }
        }
        .main{
            padding-left: 500px;
            .header{
                background-color: #fff;
                display: flex;
                padding: 10px;
                justify-content: space-between;
                align-items: center;
                ul.acs{
                    display: flex;
                    li{
                        padding: 0 5px;
                    }
                }
            }
            .body{
                padding : 10px;
                .code{
                    textarea{
                        width:100%;
                    }
                }
            }
        }
    }
</style>
